<template>
  <div class="dashboard-container">
    <!-- 悬浮操作栏 -->
    <div class="floating-actions">
      <el-tooltip content="刷新数据" placement="left">
        <el-button type="info" circle @click="refreshData" class="refresh-btn">
          <el-icon><Refresh /></el-icon>
        </el-button>
      </el-tooltip>
      <el-tooltip content="移动端入口" placement="left">
        <el-button type="primary" circle @click="showQrDialog = true">
          <el-icon><Cellphone /></el-icon>
        </el-button>
      </el-tooltip>
    </div>

    <!-- 优化后的时间显示 -->
    <div class="time-display">
      <div class="time-card">
        <div class="time-content">
          <el-icon class="clock-icon"><Clock /></el-icon>
          <div class="time-text">
            <div class="date">{{ formattedDate }}</div>
            <div class="time">{{ formattedTime }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 数据看板 -->
    <el-skeleton :loading="loading" animated>
      <template #template>
        <!-- 骨架屏内容 -->
        <el-row :gutter="16" class="stats-row">
          <el-col v-for="i in 4" :key="i" :xs="24" :sm="12" :md="6" :lg="6">
            <el-card shadow="hover" class="stat-card">
              <el-skeleton-item variant="text" style="width: 50%" />
              <el-skeleton-item variant="text" style="width: 80%" />
            </el-card>
          </el-col>
        </el-row>
      </template>
      <template #default>
        <el-row :gutter="16" class="stats-row">
          <el-col
            v-for="(stat, index) in stats"
            :key="index"
            :xs="24"
            :sm="12"
            :md="6"
            :lg="6"
          >
            <el-card shadow="hover" class="stat-card">
              <div class="stat-label">{{ stat.label }}</div>
              <div class="stat-value">{{ stat.value }}</div>
            </el-card>
          </el-col>
        </el-row>
      </template>
    </el-skeleton>

    <!-- 功能导航 -->
    <el-row :gutter="16" class="function-grid" style="margin-top: 30px;">
      <!-- 常用功能 -->
      <el-col :span="24" :md="12" :lg="8">
        <el-card class="function-card">
          <template #header>
            <div class="card-header">
              <el-icon><Menu /></el-icon>
              <span>常用功能</span>
            </div>
          </template>
          <el-row :gutter="12">
            <el-col
              v-for="(func, index) in quickFunctions"
              :key="index"
              :span="12"
            >
              <el-button
                class="func-btn"
                :icon="func.icon"
                @click="navigate(func.path)"
              >
                {{ func.label }}
              </el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-col>

      <!-- 营销工具 -->
      <el-col :span="24" :md="12" :lg="8">
        <el-card class="marketing-card">
          <template #header>
            <div class="card-header">
              <el-icon><Promotion /></el-icon>
              <span>营销中心</span>
            </div>
          </template>
          <div class="marketing-list">
            <div
              v-for="(item, index) in marketingTools"
              :key="index"
              class="marketing-item"
            >
              <el-tag effect="dark" :data-type="item.type" size="small">
                {{ item.type }}
              </el-tag>
              <span class="title">{{ item.title }}</span>
              <el-icon class="arrow"><ArrowRight /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 系统管理 -->
      <el-col :span="24" :md="12" :lg="8">
        <el-card class="system-card">
          <template #header>
            <div class="card-header">
              <el-icon><Setting /></el-icon>
              <span>系统管理</span>
            </div>
          </template>
          <el-dropdown trigger="click" placement="bottom-start">
            <el-button type="primary" plain class="system-btn">
              <el-icon><Setting /></el-icon>
              <span>管理操作</span>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu class="system-menu">
                <el-dropdown-item
                  v-for="(item, index) in systemMenus"
                  :key="index"
                  :icon="item.icon"
                >
                  {{ item.label }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-card>
      </el-col>
    </el-row>

    <!-- 二维码弹窗 -->
    <el-dialog
      v-model="showQrDialog"
      title="打开手机端"
      width="420px"
      :close-on-click-modal="false"
    >
      <div class="dialog-qr-content">
        <vue-qrcode
          value="http://118.178.139.160:8067/"
          :options="qrOptions"
          class="qr-code"
        />
        <div class="operation-steps">
          <div class="step-item">
            <el-icon :size="20"><Search /></el-icon>
            <p>打开手机微信扫一扫</p>
          </div>
          <el-divider direction="vertical" class="divider" />
          <div class="step-item">
            <el-icon :size="20"><CameraFilled /></el-icon>
            <p>扫描上方二维码</p>
          </div>
          <el-divider direction="vertical" class="divider" />
          <div class="step-item">
            <el-icon :size="20"><CircleCheckFilled /></el-icon>
            <p>完成</p>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from "vue";
import { ElMessage } from "element-plus";
import VueQrcode from "@chenfengyuan/vue-qrcode";
import {
  Clock,
  Menu,
  Promotion,
  Setting,
  ArrowRight,
  Refresh,
  Cellphone,
  Search,
  CameraFilled,
  CircleCheckFilled,
} from "@element-plus/icons-vue";

// 弹窗显示控制
const showQrDialog = ref(false);

// 二维码配置
const qrOptions = {
  width: 200,
  margin: 4,
  color: {
    dark: "#303133",
    light: "#ffffff",
  },
};

// 数据看板数据
const stats = ref([
  { label: "今日在线预订", value: "0" },
  { label: "今日预计入住", value: "0" },
  { label: "今日新入住", value: "0" },
  { label: "今日新顾客数", value: "0" },
]);

const loading = ref(true);
const currentDate = ref(new Date());

// 拆分日期时间显示
const formattedDate = computed(() => {
  return currentDate.value.toLocaleDateString("zh-CN", {
    year: "numeric",
    month: "long",
    day: "numeric",
  });
});

const formattedTime = computed(() => {
  return currentDate.value.toLocaleTimeString("zh-CN", {
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
  });
});

// 数据获取逻辑
const fetchData = async () => {
  try {
    loading.value = true;
    // 模拟API调用
    await new Promise((resolve) => setTimeout(resolve, 800));
    stats.value = stats.value.map((stat) => ({
      ...stat,
      value: Math.floor(Math.random() * 100), // 模拟动态数据
    }));
  } finally {
    loading.value = false;
  }
};

// 定时任务管理
let timer = null;
onMounted(() => {
  timer = setInterval(() => {
    currentDate.value = new Date();
  }, 1000);

  fetchData();
});

// 清理定时器
onUnmounted(() => {
  clearInterval(timer);
});

// 添加数据刷新方法
const refreshData = () => {
  fetchData();
  ElMessage.success("数据已刷新");
};

// 功能导航数据
const quickFunctions = ref([
  { label: "房态维护", icon: "HomeFilled", path: "/room-status" },
  { label: "房价管理", icon: "Money", path: "/price-manage" },
  { label: "商品管理", icon: "Goods", path: "/goods-manage" },
  { label: "会员管理", icon: "User", path: "/member-manage" },
  { label: "数据中心", icon: "Data", path: "/member-manage" },
]);

// 营销工具数据
const marketingTools = ref([
  { type: "优惠券", title: "券商中心，营销必备" },
  { type: "领券中心", title: "手机端优惠券领取中心" },
  { type: "节日有礼", title: "兑换礼品，回馈客户" },
  { type: "生日有礼", title: "兑换礼品，回馈客户" },
  { type: "砍价", title: "一起帮砍价，裂变成交" },
  { type: "粉丝召集令", title: "海报裂变，极速吸粉" },
  { type: "全民营销", title: "让你的顾客更愿意" },
  { type: "积分商城", title: "兑换礼品，回馈客户" },
]);

// 系统管理数据
const systemMenus = ref([
  { label: "切换门店", icon: "Switch" },
  { label: "帮助中心", icon: "Help" },
]);

const navigate = (path) => {
  // 路由跳转逻辑
};
</script><style lang="scss" scoped>
// 定义设计变量
$primary-color: #409eff; // 添加这行定义
$success-color: #67c23a;
$warning-color: #e6a23c;
$danger-color: #f56c6c;

// 悬浮操作栏
.floating-actions {
  position: fixed;

  right: 30px;
  bottom: 30px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 12px;

  .el-button {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s;

    &:hover {
      transform: scale(1.1) rotate(15deg);
    }
  }
}

// 时间显示优化
.time-display {
  position: fixed;
  right: 40px;
  top: 50px;
  z-index: 999;

  .time-card {
    background: linear-gradient(
      135deg,
      rgba($primary-color, 0.1) 0%,
      rgba(#fff, 0.9) 100%
    );
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

    .time-content {
      display: flex;
      align-items: center;
      gap: 12px;

      .clock-icon {
        font-size: 24px;
        color: $primary-color;
      }

      .time-text {
        .date {
          font-size: 14px;
          color: #606266;
        }

        .time {
          font-family: "Fira Code", monospace;
          font-size: 18px;
          font-weight: 600;
          color: #303133;
          letter-spacing: 1px;
        }
      }
    }
  }
}

// 数据看板动画
.stat-card {
  transition: transform 0.3s, box-shadow 0.3s;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  }

  .stat-value {
    position: relative;

    &::after {
      content: "";
      position: absolute;
      bottom: -8px;
      left: 0;
      width: 0;
      height: 2px;
      background: $primary-color;
      transition: width 0.5s ease;
    }
  }

  &:hover .stat-value::after {
    width: 80px;
  }
}

// 营销中心视觉优化
.marketing-item {
  transition: all 0.3s;

  .el-tag {
    &[data-type="优惠券"] {
      background: rgba($success-color, 0.1);
      color: $success-color;
    }
    &[data-type="砍价"] {
      background: rgba($warning-color, 0.1);
      color: $warning-color;
    }
    &[data-type="积分商城"] {
      background: rgba($danger-color, 0.1);
      color: $danger-color;
    }
  }

  &:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
  }
}

// 响应式优化
@media (max-width: 768px) {
  .dashboard-container {
    padding: 12px;

    .stats-row {
      gap: 12px;

      .el-col {
        width: 100%;
      }
    }

    .function-grid {
      .el-col {
        margin-bottom: 12px;
      }
    }
  }

  .time-display {
    position: static;
    margin-bottom: 16px;

    .time-card {
      width: 100%;
    }
  }
}
</style>